import { CommandDialog, ICmdDialogParams } from '@amcax/base';
import { Tabs, TabsProps } from 'antd';
import React from 'react';
import OperatingHabits from '../operating-habits';
import MouseGestures from '../mouse-gestures';
import CommandConfigurations from '../command-configurations';

const SettingsDialog: React.FC<ICmdDialogParams> = ({ title, onClose }) => {
  // 在这里定义子组件的props
  const childProps = {
    onCloseDialog: onClose,
  };

  const tabItems: TabsProps['items'] = [
    {
      label: '操作习惯',
      key: 'op-habit',
      children: <OperatingHabits {...childProps} />,
    },
    {
      label: '鼠标笔势',
      key: 'mos-gestures',
      children: <MouseGestures {...childProps} />,
    },
    {
      label: '命令配置',
      key: 'cmd-config',
      children: <CommandConfigurations {...childProps} />,
    },
  ];

  return (
    <CommandDialog
      title={title}
      placement='center'
      style={{
        transform: 'translate(-160px, 0%)',
      }}
      onClose={onClose}
    >
      <div className='min-w-[600px] px-4'>
        <Tabs
          type='card'
          items={tabItems}
        />
      </div>
    </CommandDialog>
  );
};
export default React.memo(SettingsDialog);
